import Button, { TableButton } from '@/components/basicWidget/Button'
import QueryList from '@/components/basicWidget/QueryList'
import { get, post } from '@/utils/requestUtil'
import { Modal, Spin, message } from 'antd'
import React, { Component } from 'react'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
import '@/pages/home/blogView/richText.css'
import TextAreaWidget from '@/components/basicWidget/TextAreaWidget'
import formValidate from '@/service/validate/formValidate'
import { getDocumentById } from '@/service/document/documentService'

class BlogAuditManage extends Component {

    constructor(props) {
        super(props)
        this.state = {
            modalVisual: false,
            modalKey: new Date().getTime() + '',
            auditBlogId: null, //被审核的博客id
            auditCommentId: null,//被审核的评论id
            auditType: '博客',  //审核类型
            modalTitle: '博客审核'
        }
    }

    async componentDidMount() {

    }

    actionColumns = (columns, data) => {
        columns.push({ title: '操作', dataIndex: 'operate' })
        data = data.map(item => {
            item.operate = (
                <TableButton
                    onClick={async () => {
                        if (item.auditType === '博客') {
                            await new Promise(resolve => {
                                this.setState({
                                    auditBlogId: item.id,
                                    modalKey: new Date().getTime() + '',
                                    modalTitle: '博客审核',
                                    auditType: '博客',
                                    modalVisual: true
                                }, resolve)
                            })
                        } else if (item.auditType === '评论') {
                            await new Promise(resolve => {
                                this.setState({
                                    auditCommentId: item.id,
                                    modalKey: new Date().getTime() + '',
                                    modalTitle: '评论审核',
                                    auditType: '评论',
                                    modalVisual: true
                                }, resolve)
                            })
                        }
                    }}
                >审核</TableButton>
            )
            return item
        })
        return { newColumns: columns, newData: data }
    }

    renderBlogAuditModal = () => {
        return (
            <Modal
                title={this.state.modalTitle}
                open={this.state.modalVisual}
                onCancel={async () => {
                    await new Promise(resolve => {
                        this.setState({
                            modalVisual: false
                        }, resolve)
                    })
                }}
                footer={null}
                width={'80%'}
            >
                <BlogAuditDetail
                    key={this.state.modalKey}
                    blogId={this.state.auditBlogId}
                    commentId={this.state.auditCommentId}
                    auditType={this.state.auditType}
                    onAgreeBlogHandler={this.onAgreeBlogHandler}
                />
            </Modal>
        )
    }

    onAgreeBlogHandler = async () => {
        await new Promise(resolve => {
            this.setState({
                modalVisual: false
            }, resolve)
        })
        await this.queryList.onQuery()
    }

    render() {
        return (
            <>
                <QueryList
                    queryCode='blogAuditManage'
                    actionColumns={this.actionColumns}
                    ref={queryList => this.queryList = queryList}
                >
                </QueryList>
                {this.renderBlogAuditModal()}
            </>
        )
    }
}

class BlogAuditDetail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            blog: null, //博客基本信息
            commentInfo: null, //评论基本信息
            modalVisual: false
        }
    }

    async componentDidMount() {
        if (this.props.auditType === '博客') {
            //博客基本信息
            let blog = null
            if (this.props.blogId) {
                const response = await get(`/blog/get/${this.props.blogId}`)
                if (response && response.code === 200) blog = response.data
            }
            if (blog) {
                await new Promise(resolve => {
                    this.setState({
                        loading: false,
                        blog
                    }, resolve)
                })
                hljs.highlightAll() //代码高亮
            }
        } else if (this.props.auditType === '评论') {
            //评论基本信息
            let commentInfo = null
            if (this.props.commentId) {
                const response = await getDocumentById({
                    id: this.props.commentId,
                    serviceName: 'blog',
                    collectionName: 'blog_comment_info'
                })
                if (response && response.code === 200) commentInfo = response.data.content
                if (commentInfo) {
                    await new Promise(resolve => {
                        this.setState({
                            loading: false,
                            commentInfo
                        }, resolve)
                    })
                }
            }
        }
    }

    //审核通过
    agreeBlog = async () => {
        let response
        if (this.props.auditType === '博客') {
            response = await post('/blog/audit', {
                body: JSON.stringify({
                    blogId: this.props.blogId,
                    auditResult: 'agree'
                })
            })
        } else if (this.props.auditType === '评论') {
            response = await post('/blog/comment/audit', {
                body: JSON.stringify({
                    blogId: this.state.commentInfo.blogId,
                    commentId: this.props.commentId,
                    auditResult: 'agree'
                })
            })
        }
        if (response && response.code === 200) {
            message.success('审核完成')
            if (this.props.onAgreeBlogHandler && typeof this.props.onAgreeBlogHandler === 'function') {
                await this.props.onAgreeBlogHandler()
            }
        }
        await new Promise(resolve => {
            this.setState({
                modalVisual: false
            }, resolve)
        })
    }

    //审核不通过
    disagreeBlog = async () => {
        let validateArray = [this.reason]
        const validateRes = await formValidate.validateForm(validateArray)
        if (!validateRes) return
        const disagreeReason = this.reason.state.value
        let response
        if (this.props.auditType === '博客') {
            response = await post('/blog/audit', {
                body: JSON.stringify({
                    blogId: this.props.blogId,
                    auditResult: 'disagree',
                    disagreeReason
                })
            })
        } else if (this.props.auditType === '评论') {
            response = await post('/blog/comment/audit', {
                body: JSON.stringify({
                    blogId: this.state.commentInfo.blogId,
                    commentId: this.props.commentId,
                    auditResult: 'disagree',
                    disagreeReason
                })
            })
        }
        if (response && response.code === 200) {
            message.success(this.props.auditType === '博客' ? '驳回成功' : '删除成功')
            if (this.props.onAgreeBlogHandler && typeof this.props.onAgreeBlogHandler === 'function') {
                await this.props.onAgreeBlogHandler()
            }
        }
        await new Promise(resolve => {
            this.setState({
                modalVisual: false
            }, resolve)
        })
    }

    renderReasonModal = () => {
        return (
            <Modal
                title={this.props.auditType === '博客' ? '驳回原因' : '删除原因'}
                open={this.state.modalVisual}
                onCancel={async () => {
                    await new Promise(resolve => {
                        this.setState({
                            modalVisual: false
                        }, resolve)
                    })
                }}
                footer={null}
                width={'40%'}
            >
                <TextAreaWidget
                    key={this.props.auditType === '博客' ? this.props.blogId : this.props.commentId}
                    rules={[
                        {
                            validate: formValidate.getValidater('isMust'),
                            failMessage: this.props.auditType === '博客' ? '驳回原因不能为空' : '删除原因不能为空'
                        }
                    ]}
                    ref={reason => this.reason = reason}
                ></TextAreaWidget>
                <Button
                    style={{ marginTop: '10px' }}
                    onClick={this.disagreeBlog}
                >提交</Button>
            </Modal >
        )
    }

    render() {
        if (this.state.loading === true) return <Spin />
        return (
            <div style={{ maxHeight: '70vh', overflow: 'auto' }}>
                <div style={{ position: 'absolute', top: '60px', right: '40px' }}>
                    <TableButton style={{ marginRight: '10px' }} onClick={this.agreeBlog}>通过</TableButton>
                    <TableButton
                        style={{ backgroundColor: 'var(--bg-three-color)' }}
                        onClick={async () => {
                            await new Promise(resolve => {
                                this.setState({
                                    modalVisual: true
                                }, resolve)
                            })
                        }}
                    >
                        {this.props.auditType === '博客' ? '驳回' : '删除'}
                    </TableButton>
                </div>
                {
                    this.props.auditType === '博客' ?
                        <>
                            <h1>{this.state.blog.blogTitle}</h1>
                            <div className='richText' dangerouslySetInnerHTML={{ __html: this.state.blog.htmlText }}></div>
                        </> :
                        <div style={{marginTop: '40px'}}>{this.state.commentInfo.text}</div>
                }
                {this.renderReasonModal()}
            </div>
        )
    }
}

export default BlogAuditManage